html, body {
    position : relative;
    margin: 0;
    padding: 0;
    height: 100%;
    text-decoration: none;
    list-style: none;
    background-color: #EA02E2;
}

a:link    {color:rbg(50,50,50);}
a:visited {color:rbg(50,50,50);}
a:hover   {color:rbg(80,80,80);}
a:active  {color:rbg(130,130,130);}

 pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */ 
}

#wrapper {
    height: auto !important; /* ie6 ignores !important, so this will be overridden below */
    min-height: 100%; /* ie6 ignores min-height completely */
    height: 100%;
    background-color: black;
    font-family: monospace;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #222;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #222;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #222;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #222;
}

textarea {
    resize: none;
}

#wordCountLabel {
    padding: 10px;
    color: #777;
}

#flowEntry
{
    border: none;
    background-color: black;
    overflow: hidden;
    color: #777;
    border-style: solid;
    border-width: 2px;
    border-color: #222;
    font-family: 'Cutive Mono', serif;
}

#flowCollection
{
    border: none;
    background-color: #000;
    color: #fff;
    text-align: left;
    width: 60%;
    height: 50px;
    text-align: justify;
    padding: 20px;
    /*background-image: url("../shadow2.png");*/
    background-repeat: repeat-x;    
}

#flowCollectionNotification
{
    background-color: #D03A19;
    padding: 10px;
    color: white;
    position: fixed;
    width: 100%;
}

#flowCollectionWrapper {
    background-color: #780115;
    min-height: 100%;
    height: 100%;
    overflow: hidden;
    /*background-image: url("../shadow2.png");*/
    background-repeat: repeat-x;    
}

#summaryHeader
{
    background-color: blue;
    height: 300px;
}

.footer {
   position:fixed;
   left:0px;
   bottom:0px;
   width:100%;
   background:#fff;
}

#endShadow {
    height: 3px;
    background-color: #777;
}

#socialMedia {
    background-color: #000;
}

#donateButton {
    position: fixed;
    right: 12px;
    top: 11px;
}

.rightPaddle
{
    display: none;
    margin-right: 10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 50px 0px 50px 50px;
    border-color: transparent transparent transparent #E87615;
    line-height: 0px;
    _border-color: #000000 #000000 #000000 #E87615;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    z-index: 10;
    position: fixed;
    right: 0;
    top: 20;
}

.leftPaddle
{
    display: none;
    margin-left: 10px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 50px 50px 50px 0;
    border-color: transparent #E87615 transparent transparent;
    line-height: 0px;
    _border-color: #000000 #E87615 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    z-index: 10;
    position: fixed;
    left: 0;
    top: 20;
}

.leftPaddle:hover
{
    border-color: transparent #F6C425 transparent transparent;
    _border-color: #000000 #F6C425 #000000 #000000;
    cursor: pointer;
}

.rightPaddle:hover
{
    border-color: transparent transparent transparent #F6C425;
    _border-color: #000000 #000000 #000000 #F6C425;
    cursor: pointer;            
}

#homeIcon
{
    color: #444;
    position: fixed;
    top: 15px;
    left: 15px;
}

#homeIcon:hover
{
    color: #777;
    cursor: pointer;
}

#peekDiv 
{
    display: block;
}

#peekIcon
{
    color: #444;
}

#peekIcon:hover
{
    color: #777;
    cursor: pointer;
}

.progress {
    display: inline;
    min-width: 100%;
    width: 100%;
    background-color: #777;
}

.progress .meter {
    float: left;
    width: 100%;
    background-color: #500;
    display: inline;
}

.meterWrapper
{
    width: 100%;
    background-color: #000;
    display: inline;
}

#setupWrapper {
    background-color: #780115;
    background-color: #333;
}

#coachingLink {
    background-color: #EA02E2;
    color: #fff;
}

#proSignUp {
    background-color: #EA02E2;
    color: #fff;
}

#proSignUpText {
    padding: 18px;
}

#proSignUpEmail {
    padding: 5px;
}

#proSignUpConfirm {
    padding: 18px;
}

#proSignUpEmailAddress {
    background-color: #F6C425;
    border-color: #000;
    color: #444;
    width:270px; 
    padding: 10px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 400; 
    font-size: 14px; 
    color: #9D9E9E; 
    text-shadow: 1px 1px 0 rgba(256, 256, 256, 1.0); 
    background: #FFF; 
    border: 1px solid #FFF; 
    border-radius: 5px; 
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); 
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.50); 
}


#proSignUpEmailAddress:hover
{
    background-color: #FFF;
    border-color: #000;
    color: #000;
}

#proSignUpEmailButton
{
    border-color: #000;
    color: #000;
    padding: 10px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 400; 
    font-size: 14px; 
    background: #DDD; 
    border: 1px solid #000; 
    border-radius: 5px; 
}

#proSignUpEmailButton:hover
{
    background-color: #EEE;
    border-color: #000;
    color: #000;
}

#proSignUpText:hover {
    cursor: pointer;
}

#setupHero {
    padding: 10px;
    background-color: #fff;
    font-size: 5em;
    font-weight: bolder;
    color: #111;
    line-height: 30px;
    text-shadow: 0px 1px 4px #333;

    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
}

#ilysBirthdayCake
{
    padding: 10px;
    background-color: #fff;
    color: #000;
    font-size: .5em;
    line-height: 1.2em;
}

#ilysBirthdayText
{
    padding: 10px;
    background-color: #fff;
    color: #000;
    font-size: .7em;
    line-height: 1.2em;
    text-align: justify;
    width: 90%;
}

#startHere {
    font-size: 3em;
    color: #0f0;
    padding: 30px;
}

#content{
    background-image: url("../shadow2.png");
    background-repeat: repeat-x;
}

.rollUpFrontPageText {
    margin-top: 3%;
    width: 80%;
    line-height: 1em;
    font-size: 2em;
    text-align: justify;
    padding: 30px;
    background-color: #EA02E2;
    border-style: solid;
    border-width: 2px;
    border-color: #000;
    color: #fff;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px; /* future proofing */
    -khtml-border-radius: 15px; /* for old Konqueror browsers */
}


.rollUpFrontPageText a:link    {color: #fff;}
.rollUpFrontPageText a:visited {color: #fff;}
.rollUpFrontPageText a:hover   {color: #fff;}
.rollUpFrontPageText a:active  {color:rbg(130,130,130);}

.hr {
    color: #f00;
}


#introText, p {
    margin-top: 0px;;
}

#introText:hover {
    cursor: pointer;
}

#testimonials, p {
    margin-top: 0px;;
}

#testimonials:hover {
    cursor: pointer;
}

.bigTexbox {
    font-size: 3em;
    background-color: #F6C425;
    border-color: #000;
    color: #000;
    padding: 15px;
}

.bigButton {
    font-size: 3em;
    height: auto;
    background-color: #F6C425;
    color: #000;
    border-color: #000;
    padding: 15px;
}

.bigButton:hover {
    background-color: #F49D1C;
    cursor: pointer;
}

#bigButton:active {
    background-color: #333;
    color: #111;
}

.flowView
{
    display: none;
}

.summaryView
{
    display: none;
}

.setupView
{
    display: none;
}

#coachingLinkText
{
    padding: 10px;
    color: #fff;
}

#coachingContent
{
    color: #fff;
}

.win-container {
  position: fixed;
  left: 0;
  top: 0;
}